<template>
  <!-- 异常统计 -->
  <div class="chart-box2">
    <div class="chart-title">异常统计</div>
    <div class="chart-content">
      <ScrollTable :header="tableHeader" :list="data" :config="config" />
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import common from "../../utils/common";
import store from "../../../../store";
import ScrollTable from "../common/ScrollTable.vue";

export default defineComponent({
  name: "DeviceAbnormalRecord",
  components: { ScrollTable },
  setup() {
    const state = reactive({
      tableHeader: [
        { key: "name", title: "设备名称" },
        { key: "typeTxt", title: "设备类型" },
        { key: "position", title: "所在位置" },
        { key: "statusTxt", title: "当前状态" },
      ],
      data: [],
      config: {
        span: [8, 4, 8, 4],
      },
    });

    watch(
      () => store.getters.centerControl.Device_faultStatistic,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const colorMap = {
      color0: common.theme.primaryYellow,
      "color-1": common.theme.primaryRed,
      color1: common.theme.lightGreen,
    };
    const getData = () => {
      const { Device_faultStatistic } = store.getters.centerControl;
      if (Device_faultStatistic) {
        state.data = Device_faultStatistic.list.map((item) => {
          item.style = {
            statusTxt: {
              color: colorMap[`color${item.status}`],
            },
          };
          return item;
        });
      }
    };

    const init = () => {
      getData();
    };

    init();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
